<template>
  <div class="HomeMainHz">
    <personal-setting :setting="systemConfig" class="personal-setting"></personal-setting>
    <div class="systemTitle display-flex">
      <div class="logo"></div>
      <div class="flex-1">
        <div class="appName">
        </div>
        <div class="text" style=" color: black;font-weight: bold">全域·全类型·全要素</div>
      </div>
    </div>
    <div class="bottom-hz">
      <a-tooltip
        :get-popup-container="getPopupContainer"
        placement="top"
      >
        <template slot="title">
          <a-button type="primary" style="background-color:#0167da;border: #0167da;width: 60%" class="m-b-xs"
                    @click="goto('jsc_yszbgl')">
            要素指标管理
          </a-button>
          <a-button type="primary" style="background-color:#0167da;border: #0167da;width: 60%" class="m-b-xs"
                    @click="goto('kjsp')">
            空间适配
          </a-button>
          <br/>
          <a-button type="primary" style="background-color:#0167da;border: #0167da;width: 60%" class="m-b-xs"
                    @click="goto('swxz')">
            智慧选址
          </a-button>
          <a-button type="primary" style="background-color:#0167da;border: #0167da;width: 60%" @click="goto('hgsc')">
            空间准入辅助审查
          </a-button>
        </template>
        <div class="item1">
          <div class="img1 img">
            <div class="number">{{ kjzrNum }}</div>
          </div>
          <div class="text">空间准入</div>
        </div>
      </a-tooltip>

      <div @click="goto('独立网页')" class="item">
        <div class="img5 img">
        </div>
        <div class="text">独立网页</div>
      </div>
      <div @click="goto('xtsp')" class="item">
        <div class="img2 img">
          <div class="number">{{ ghxkNum }}</div>
        </div>
        <div class="text">规划许可</div>
      </div>
      <a-tooltip
        :get-popup-container="getPopupContainer"
        placement="top"
      >
        <template slot="title">
          <a-button type="primary" style="         background-color:#0167da;border: #0167da;width: 60%;bottom: -50px"
                    class="m-b-xs" @click="goto('ggh')">
            规管会
          </a-button>
          <a-button type="primary" style="background-color:#0167da;border: #0167da;width: 60%;;bottom: -70px"
                    class="m-b-xs" @click="goto('fasc')">
            方案审查
          </a-button>
        </template>
        <div class="item1">
          <div class="img1 img"></div>
          <div class="text">规划管理</div>
        </div>
      </a-tooltip>
      <a-tooltip
        :get-popup-container="getPopupContainer"
        placement="top">
        <template slot="title">
          <a-button type="primary" style="background-color:#0167da;border: #0167da;width: 60%;bottom: -50px"
                    class="m-b-xs" @click="goto('phjg')">
            批后监管
          </a-button>
          <br/>
          <a-button type="primary" style="background-color:#0167da;border: #0167da;width: 60%;bottom: -70px"
                    @click="goto('jsc_jcpg')">
            监测评估
          </a-button>
        </template>
        <div class="item1">
          <div class="img3 img"></div>
          <div class="text">监测评估</div>
        </div>
      </a-tooltip>
      <div @click="goto('jsc_tjfx')" class="item">
        <div class="img4 img"></div>
        <div class="text">统计分析</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import PersonalSetting from '@c/Layout/PersonalSetting'
import config from '@/config/defaultSettings'

const modulesName = [
  '独立网页',
  '系统设置',
  '投资平台',
  '规划许可',
  '综合查询',
  '数据上报'
]
export default {
  name: 'HomeMainHz',
  data () {
    return {
      systemConfig: config,
      handMenuMap: {},
      jscRelation: {
        jsc_jcpg: 'JSC_JCPG',
        jsc_yszbgl: 'JSC_YSZBGL',
        jsc_tjfx: 'JSC_TJFX'
      },
      ghxkNum: 2,
      kjzrNum: 1
    }
  },
  components: {
    PersonalSetting
  },
  created () {
    // console.log(this.handMenuMap)
    Object.keys(this.menuMap).map(key => {
      this.menuMap[key].forEach(item => {
        const element = modulesName.includes(item.name)
        // console.log(1, element)
        // console.log(2, item)
        if (element) {
          this.handMenuMap[item.name] = item
        }
      })
    })
  },
  mounted () {
    console.log('首页mounted')
  },
  computed: {
    ...mapState({
      menuMap: state => state.permission.menuMap
    })
  },
  methods: {
    getPopupContainer (trigger) {
      return trigger.firstChild
    },
    goto (type) {
      if (type === 'none') {
        this.$message.warning('该模块正在建设中，请等待上线后再使用。')
        return
      }
      if (type === 'hgsc') {
        window.open(window.config.VUE_APP_HGSC)
      }
      if (type === 'jsc_jcpg' || type === 'jsc_tjfx' || type === 'jsc_yszbgl') {
        const routerPath = this.$store.getters.getPagePathByName(this.jscRelation[type])
        if (!routerPath) {
          this.$message.warning('您没有进入该模块的权限，请联系管理员开通！')
          return
        }
        window.open(window.config.VUE_APP_JSC + '#' + routerPath)
        return
      }
      const model = this.handMenuMap[type]
      if (!model) {
        this.$message.warning('您没有进入该模块的权限，请联系管理员开通！')
        return
      }
      if (model.name === '独立网页') {
        window.open(model.url)
        return
      }
      if (model.name === '规划落实') {
        window.location.href = window.config.VUE_APP_KJSP
        return
      }
      if (model.routerName) {
        if (model.children && model.name === '规划许可') {
          model.children.forEach(item => {
            if (item.name.indexOf('在办') > -1) {
              this.$router.push({ name: item.routerName })
            }
          })
          // pushByWidgetName('待办件', this)
        } else if (model.children && model.name === '批后监管') {
          this.$router.push({ name: model.children[0].routerName })
        } else {
          // pushByWidgetName('1', this)
          this.$router.push({ name: model.routerName })
        }
      } else if (model.url) {
        window.open(model.url)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.personal-setting {
  position: absolute;
  right: 25px;
  top: 24px;
}

.HomeMainHz {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/home/b/background.jpg") no-repeat;
  background-size: 100% 100%;
  padding-top: 180px;
  display: flex;
  flex-direction: column;

  .systemTitle {
    text-align: left;
    margin-left: 100px;
    width: 100%;
    height: 30%;
    color: white;
    float: left;

    .appName {
      font-size: 50px;
      font-weight: 700;
      letter-spacing: 2px;
      font-family: Alimama ShuHeiTi, Alimama ShuHeiTi-Bold, serif;
      width: 535px;
      height: 42px;
      background: url("../../assets/img/home/b/kjzr.png") no-repeat;
      background-size: 100% 100%;
    }

    .logo {
      position: relative;
      top: -22px;
      left: -25px;
      width: 80px;
      height: 140px;
      background: url("../../assets/img/home/b/kjzr.png");
      background-size: 100% 100%;
    }

    .text {
      font-family: PingFang SC, PingFang SC-Regular, serif;
      font-size: 25px;
      line-height: 75px;
      letter-spacing: 3px;
      margin-left: 33px;
    }
  }

  .bottom-hz {
    width: 100%;
    height: 10%;
    padding: 14% 15% 0 17%;
    display: flex;
    justify-content: space-around;

    .item:hover {
      transform: translateY(-40px);
      background: url("../../assets/img/home/b/bg2.png");
      background-size: 100% 100%;
    }

    .item1:hover {
      background: url("../../assets/img/home/b/bg2.png");
      background-size: 100% 100%;
    }

    .item1 {
      width: 220*0.8px;
      height: 190*0.8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      transition: all .25s ease-in;
      background: url("../../assets/img/home/b/bg1.png");
      background-size: 100% 100%;
      position: relative;
    }

    .item {
      width: 220*0.8px;
      height: 190*0.8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      transition: all .25s ease-in;
      background: url("../../assets/img/home/b/bg1.png");
      background-size: 100% 100%;
      cursor: pointer;
    }

    .text {
      width: 200px;
      height: 60px;
      font-family: PingFang SC, PingFang SC-Regular, serif;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      line-height: 60px;
      font-size: 22px;
    }

    .img {
      width: 75*0.6px;
      height: 75*0.6px;
      margin-top: 5px;
    }

    .img1 {
      background: url("../../assets/img/home/b/kjzr.png");
      background-size: 100% 100%;
    }

    .img2 {
      background: url("../../assets/img/home/b/kjzr.png");
      background-size: 100% 100%;
    }

    .img3 {
      background: url("../../assets/img/home/b/kjzr.png");
      background-size: 100% 100%;
    }

    .img4 {
      background: url("../../assets/img/home/b/kjzr.png");
      background-size: 100% 100%;
    }

    .img5 {
      background: url("../../assets/img/home/b/kjzr.png");
      background-size: 100% 100%;
    }
  }

  .number {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #ff3b30;
    position: relative;
    margin-top: -32px;
    margin-left: 92px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center
  }

  /deep/ .ant-tooltip {
    position: relative !important;
    top: -160px !important;
    left: 0px !important;
    width: 250px;
  }

  /deep/ .ant-tooltip-inner {
    background-color: transparent;
    box-shadow: unset;
  }

  /deep/ .ant-tooltip-arrow {
    display: none;
  }
}
</style>
